<template>
	<div>

		<el-select
      ref="select"
			v-model="selectValue"
			filterable
			clearable
			remote

			:allow-create="allowCreate"
			@clear="$emit('clear')"
			:disabled="disabled"
			:multiple="multiple"
			@change="selectValueChange"
			:placeholder="placeholder"
			:remote-method="search"
			:loading="loading">
			<el-option
				v-for="(item,index) in list"
				:key="index"
				:label="item[config.label]"
				:value="item[config.value]">
				<span>
					<tr class="row">

						<td v-for="a in config.keys">
							<template v-if="a.switch">
								<el-tag :type="b.type" :key="b.name" v-if="eval(item[b.key] + (b.symbol || '==') + b.value)" v-for="b in a.switch" size="mini">{{ b.name }}</el-tag>
							</template>
							<template v-else>

								<el-tag :type="a.type" v-if="item[a.key]" size="mini">{{ a.name }}</el-tag>

								{{ item[a.key] }}
							</template>

						</td>
					</tr>
				</span>
			</el-option>
		</el-select>
	</div>
</template>

<script>
	import request from "@/utils/request";
	export default {
		name: "searchInput",
		props: ['value', 'config', 'searchName', 'placeholder', 'disabled', 'multiple', 'allowCreate'],
		data(){
			return {
				selectValue: '',
				loading: false,
				list: [],
				changeValue: '',
          timeout:"",
			}
		},

		mounted() {


        this.selectValue = this.value


        setTimeout(() => {

            this.search(this.searchName || '')
        }, 500);

        // this.search(this.searchName || '')



    },

		methods: {
			eval(string){
				return eval(string)
			},

			async search(query){

				this.loading = true
				if(this.config.postKey){
					this.config.data[this.config.postKey] = query
				}
				let api = []
				if(!Array.isArray(this.config.api)){

					api.push(this.config.api)
				}else{
					api = this.config.api
				}
				let ress = []

				for(let i=0; i<api.length; i++){




              let res = await request({

                  url: api[i].replace('@', query),
                  method: this.config.method || 'get',
                  data: this.config.data || {},
                  params: this.config.data || {}
              })
              if(res.code == '200' && res.data){

                  if(res.data.curr){
                      if(res.data.data){

                          ress.push(res.data.data)

                      }
                  }else{
                      for(let i=0;i<res.data.length;i++){
                          if(res.data[i].meal==true){
                              res.data[i].ismeal="套餐内项目"
                          }else {
                              res.data[i].ismeal="套餐外项目"
                          }
                      }
                      ress.push(res.data)
                      console.log(ress)


                  }
              }
          }
				let result = []

				ress.forEach(item => {

				    item.forEach(a => {

                if(this.config.values){

                    let v = ''

                    this.config.values.forEach(i => {


                        v += a[i]



                    })

                    a.markId = v





                }
            })
					result = result.concat(item)

				})
				this.list = result
				this.loading = false
			},
			selectValueChange(value){
				if(Array.isArray(value)){
					let arr = []
					value.forEach(item => {
						let row = this.list.find(row => { return row[this.config.value] == item }) || {}
						arr.push({...row})
					})
					this.$emit('change', arr)
					this.changeValue = ''
				}else{
					this.$emit('input', value)
					let row = this.list.find(row => { return row[this.config.value] == value }) || {}
					this.$emit('change', row)
					this.changeValue = row[this.config.label]
				}
				this.$emit('input', value)
			},
        focus(){
            this.$refs.select.focus()
        },
		},

		watch: {
			value: function(val){
				if(this.multiple){
					let name = this.searchName || this.changeValue || ''
					if(!val){
						name = ''
					}
					 this.search(name)
				}
				this.selectValue = val
			}
		}
	};
</script>
<style scoped>
	.row td{padding-right: 20px; }
	.row td:last-child{padding-right: 0;}
	.row td span{margin-right: 5px;}
</style>

<!-- 示例数据 -->
<!-- sConfig: {
	api: '/sinohis/pension/profession/elderlyfile/query/file/@',
	label: 'elderlyName',
	value: 'elderlyCode',
	keys: [
		{ name: '姓名', key: 'elderlyName', type: 'success' },
		{ name: '证件号', key: 'cardNo' },
		{ name: '状态', switch: [
			{ name: '未婚', key: 'maritalStatus', value: 2, type: 'danger', symbol: '==' },
     		{ name: '已婚', key: 'maritalStatus', value: 2, type: 'danger', symbol: '!=' },
		]}
	]
} -->
